<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="../debug/debug.js"></script>
<script>
	var debug;
	function getX(e){
		e  = e||window.event;
		return e.pageX||e.clientX+document.body.scrollLeft||0;
	}
	
	function getY(e){
		e = e||window.event;
		return e.pageY||e.clientY+document.body.scrollTop||0;
	}
	
	//문서내 마우스  클릭 위치
	function getPoint(e){
		var x = getX(e);
		var y = getY(e);
		debug.displayMsg("x:"+x+",y:"+y);
	}
	
	//엘리멘트내 마우스 클릭위치
	function getPointInElement(e){
		var x = getElementX(e);
		var y = getElementY(e);
		debug.displayMsg("in element x:"+x+",in element y:"+y);
		if(e)
			e.stopPropagation();
		else
			window.event.cancelBubble = true;
		
	}
	
	function getElementX(e){
		e = e||window.event;
		return e.layerX||e.offsetX;
	}
	function getElementY(e){
		e = e||window.event;
		return e.layerY||e.offsetY;
	}
	
	window.onload = function(e){
		debug =new DebugConsole();
		
		document.onclick=function(e){
			getPoint(e);
		}
		
		document.getElementById("elem").onclick=function(e){
			getPointInElement(e);
		}
	}
</script>

<body>
	<div id="elem" style="position:absolute;width: 150px;height: 150px ;background: yellow;left: 50px;top: 50px;"></div>
</body>
</html>